<template>
	<view class='house-wrap' style="padding-top:10px">
		<view class="  u-m-t-10 house-card u-flex-1 u-p-40" v-for="(item,index) in homeList" :key='index'>
			<view class="u-font-32 u-m-b-20" style="color: #333;display: flex; align-items: center;">
				<image style="width: 20px;height: 20px;margin-right: 6rpx;m" src="https://clhy-img.oss-cn-beijing.aliyuncs.com/ownerImage/house3.png" alt="">
				</image>
				<h3>{{item.proName}}-{{item.buildDistrictCode}}-{{item.buildTowerCode}}-{{item.roomUnitNumber}}-{{item.roomCode}}
				</h3>
			</view>
			<view class="u-m-b-20 u-font-28" style="color: #999;">
				建筑面积：
				<span style="color: #666;">{{item.roomAreaOfStructure}}㎡</span>
			</view>
			<view class="u-m-b-20 u-font-28" style="color: #999;">
				物业费：
				<span style="color: #666;">
					{{item.wuYePrice?item.wuYePrice+'/'+'平方米/'+(item.costsPeriodUnit==1?'年':item.costsPeriodUnit==2?'半年':item.costsPeriodUnit==3?'季度':'月'):'未设置'}}
				</span>

				<span style="margin-left: 20px;">
					年：
					<span style="color: #666;">{{(item.wuYePrice * item.roomAreaOfStructure * 12).toFixed(0)}}元/年</span>
				</span>
			</view>
			<view class="u-m-b-20 u-font-28" style="color: #999;">
				物业公司：
				<span style="color: #666;">{{item.orgName}}</span>
			</view>
			<view class="u-m-b-20 u-font-28" style="color: #999;">
				房屋地址：
				<span style="color: #666;">{{item.city}}{{item.district}}</span>
			</view>

			<view class="u-m-b-10 u-font-28" style="color: #999;">
				不动产权证书(房产证)：
				<text v-if="item.housingPicture" @click="checkHouse(index)" style="color: blue;">查看房产</text>
				<text v-else @click="uoloadHouse(item)" style="color: blue;">上传房本</text>
			</view>
			<view @click="uoloadHouse(item)" v-show="item.housingPicture&& index==showHouse"
				class="u-flex-1 house-upload u-rela">
				<image @click="seeImg(item.housingPicture)" :src="item.housingPicture" class="u-abso housr-image"
					v-show="item.housingPicture" mode="aspectFill"></image>
			</view>
		</view>
		<!-- 新增房屋 -->
		<view style="height: 45px;position: fixed;right: 50rpx;bottom: 150px;" @click="addRoom">
			<image style="width: 40px;height: 40px;" src="https://clhy-img.oss-cn-beijing.aliyuncs.com/ownerImage/tenAddDatas.png">
			</image>
		</view>
	</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				imgFile: null,
				res: null,
				homeList: [],
				showHouse: null,
			}
		},
		created() {
			this.checkLogin()
		},
		onPullDownRefresh() {
			if (uni.getStorageSync('loginFlag')) {
				this.getHouseList()
			}
		},
		methods: {
			checkHouse(index) {
				this.showHouse = index
			},
			// 新增房屋
			addRoom() {
				this.$Router.push({
					path: '/my/address/address'
				})
			},
			// 验证是否登录或实名认证
			checkLogin() {
				let _this = this
				if (uni.getStorageSync('phone')) {
					if (uni.getStorageSync('loginFlag')) {
						if (!uni.getStorageSync('hourseList')) {
							uni.showModal({
								title: '请先进行业主认证',
								showCancel: false,
								confirmText: '确认',
								confirmColor: '#F9A832',
								success: function(res) {
									if (res.confirm) {
										_this.$Router.push({
											path: '/my/address/address'
										})
									}
								}
							});
							this.$openInvite()
						} else {
							_this.showFlag = true
							_this.homelist = uni.getStorageSync('hourseList')[uni.getStorageSync('hourseNum') || 0]
							_this.name = _this.homelist.proName;
							_this.address = _this.homelist.buildDistrictCode + '-' + _this.homelist.buildTowerCode + '-' +
								_this.homelist.roomUnitNumber + '-' + _this.homelist.roomCode

							if (uni.getStorageSync('loginFlag')) {
								this.getHouseList()
							}
						}
					} else {
						uni.showModal({
							title: '请先实名认证',
							showCancel: false,
							confirmText: '确认',
							confirmColor: '#F9A832',
							success: function(res) {
								if (res.confirm) {
									_this.$Router.push({
										path: '/homePage1/realName/realName'
									})
								}
							}
						});
					}
				} else {
					uni.showModal({
						title: '请先登录',
						showCancel: false,
						confirmText: '确认',
						confirmColor: '#F9A832',
						success: function(res) {
							if (res.confirm) {
								console.log('a')
								_this.$Router.pushTab({
									path: '/pages/user/user'
								})
							}
						}
					});
				}
				uni.stopPullDownRefresh()

			},
			//获取房屋信息
			async getHouseList() {
				uni.showLoading({
					title: "加载中"
				})
				let res = await this.$request.api.house({
					mobile: uni.getStorageSync('phone')
				})
				//查询是否存在自己租的房屋
				let res2 = await this.$request.api.getProByMobile({
					mobile: uni.getStorageSync('phone') || this.phone
				})
				console.log(res2)
				if (res.data.data.projectList.length > 0) {
					uni.setStorageSync('hourseList', res.data.data.projectList)
					this.homeList = res.data.data.projectList
				} else if (res2.data.data.projectList.length > 0) {
					uni.setStorageSync('hourseList', res2.data.data.projectList)
					this.homeList = res2.data.data.projectList
				}
				uni.hideLoading();
				uni.stopPullDownRefresh();
			},
			// 选择图片
			uoloadHouse(val) {
				if (!val.housingPicture) {
					this.$Router.push({
						path: '/homePage1/uploadRoon/uploadRoon',
						query: {
							room_id: val.roomId,
							type: 2
						}
					})
				}
			},

			// 查看图片
			seeImg(val) {
				let _this = this
				uni.previewImage({
					urls: [val],
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
						},
						fail: function(err) {
						}
					}
				});
			}
		}
	}
</script>

<style lang='scss'>
	.house-wrap {
		background: #f4f4f4;
		width: 100vw;
		height: 100vh;
		padding: 0 50rpx;
		height: 100vh;

		.house-card {
			background: #fff;
			border-radius: 12rpx;
			.house-upload {
				height: 336rpx;
				background: #f6f6f6;
				border-radius: 12rpx;
				.house-camera {
					top: 0;
					left: 0;
					right: 0;
					bottom: 0;
					margin: auto;
					width: 112rpx;
					height: 162rpx;
					.upload-img {
						width: 112rpx;
						height: 100rpx;
					}
				}
				.housr-image {
					width: 100%;
					height: 100%;
					top: 0;
					left: 0;
					border-radius: 20rpx;
				}
				.image-delete {
					width: 50rpx;
					height: 50rpx;
					top: 40rpx;
					right: 40rpx;
				}
			}
		}
	}
</style>